html,
body {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;

    color: inherit;
}

@function nf($n) {
    @if $n == m {
        @return margin;
    } @else if $n == p {
        @return padding;
    } @else {
        @return '';
    }
}

@function df($d) {
    @if $d == t {
        @return -top;
    } @else if $d == r {
        @return -right;
    } @else if $d == b {
        @return -bottom;
    } @else if $d == l {
        @return -left;
    } @else {
        @return '';
    }
}

@mixin serialize($i) {
    @each $n in m, p {
        @each $d in '', t, r, b, l {
            .#{$n}#{$d}-#{$i} {
                #{nf($n)}#{df($d)}: #{$i}px;
            }
        }
    }
}

@for $i from 0 to 31 {
    @if $i % 2 == 0 {
        @include serialize($i);
    } @else if $i == 15 {
        @include serialize($i);
    }
}

@for $i from 12 to 31 {
    @if $i % 2 == 0 {
        .fz-#{$i} {
            font-size: #{$i}px;
        }
    }
}

.clamp {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

@for $i from 2 to 4 {
    .clamp-#{$i} {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;

        text-overflow: ellipsis;

        -webkit-line-clamp: $i;
        line-clamp: $i;
    }
}

// 垂直居中(middle-center)
@mixin mc($top: 50%, $left: 50%) {
    position: absolute;
    top: $top;
    left: $left;

    transform: translate(-50%, -50%);
}

.row {
    display: flex;
}
